<?php $hots = $this->requestAction('/Products/getHotProduct');
if(!empty($hots)){?>
<?php echo $this->Html->script('frontend/jquery.carouFredSel-5.4.1');?>
<div class="productCateHot" id="product_hot">
    <div class="menu_caption">
        <div class="caption">
            <a id="ctl00_cphMain_ProductCateHot_mrcProductHot" href="#" target="_self">Top sản phẩm bán chạy</a>
        </div>
        <div class="prev_next">
            <a class="prev" id="prev" href="#" style="display: block;"></a>
            <a class="next" id="next" href="#" style="display: block;"></a>
        </div>
    </div>
    <div class="caroufredsel_wrapper" style="text-align: start; float: left; position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 217px; height: 311px; margin: 10px 0px 0px; overflow: hidden;">
        <div class="list" style="text-align: left; float: none; position: absolute; top: 0px; left: 0px; margin: 0px; width: 5859px; height: 331px;">
            <?php foreach($hots as $k=>$v){?>
                <div class="item">
                    <div class="wr_img">
                        <a target="_self" class="item-image" title="" rel="" href="<?php echo $this->Html->url("/products/detail/".$v['Product']['id']);?>"><img alt="<?php echo $v['Product']['product_code']?>" src="<?php echo $v['Product']['image']?>" style="display:block;margin: 0 auto;width: 198px !important; height: 311px !important;"></a>
                    </div>

                </div>
            <?php } ?>
        </div>
    </div>
        <div class="clear">
        </div>
    </div>
    <script type="text/javascript">
        if ($('#product_hot .list .item').length > 1) {
            $("#product_hot .list").carouFredSel({
                auto: true,
                items: 1,
                curcular: true,
                infinite: false,
                direction: "left",
                scroll: {
                    items: 1,
                    fx: "crossfade",
                    easing: "linear",
                    duration: 1500
                },
                prev: {
                    button: "#product_hot #prev",
                    key: "left"
                },
                next: {
                    button: "#product_hot #next",
                    key: "right"
                },
                height: 311
            });
        }
    </script>

<?php } ?>